<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="mt30" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersUniv" ref="filtersUniv">
                <div class="col-title">学校概况统计</div>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersUniv.belong" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="高校类型" v-model="filtersUniv.arts_type" size="12px" clearable>
                        <el-option  :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersUniv.provinces" size="18px" clearable>
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button v-loading="univTableDataLoading" type="primary" @click="searchUniv">搜索</el-button>
                    <el-button v-loading="univTableDataLoading" @click="reset('filtersUniv')">重置</el-button>
                    <el-button v-loading="univExportLoading"  @click="exportExcel('univ')">导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :data="univTableShowData"
                v-loading="univTableDataLoading"
                style="width: 100%;"
                @sort-change="tabSort"
        >
            <el-table-column
                    label="高校名称"
                    :width="200"
                    prop="unit_Name"/>
            <el-table-column
                    align="center"
                    label="科研实验室数量"
                    sortable="custom"
                    prop="basic_param4"/>
            <el-table-column
                    align="center"
                    label="教学实验室数量"
                    sortable="custom"
                    prop="basic_param6"/>
            <el-table-column
                    align="center"
                    label="实验室总数量"
                    sortable="custom"
                    prop="lab_total"/>
            <el-table-column
                    align="center"
                    label="仪器设备数量"
                    sortable="custom"
                    prop="basic_param8"/>
            <el-table-column
                    align="center"
                    label="仪器设备总价值 (万元)"
                    sortable="custom"
                    prop="basic_param10"/>
            <el-table-column
                    align="center"
                    label="在职教工人数"
                    sortable="custom"
                    prop="basic_param5"/>
            <el-table-column
                    align="center"
                    label="在校本科生人数"
                    sortable="custom"
                    prop="basic_param7"/>
            <el-table-column
                    align="center"
                    label="在校研究生人数"
                    sortable="custom"
                    prop="basic_param9"/>
            <el-table-column
                    align="center"
                    label="涉及实验室工作的师生总人数"
                    sortable="custom"
                    prop="basic_param11"/>
            <el-table-column
                    align="center"
                    label="人均占有仪器设备价值(万元)"
                    sortable="custom"
                    prop="per_capita"/>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pagerUniv.page_size"
                    :page-sizes="pagerUniv.sizes"
                    background
                    :current-page="pagerUniv.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pagerUniv.total">
            </el-pagination>
        </el-col>
        <!--搜索工具条-->
        <el-col :span="24" class="mt30" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filtersBases" ref="filtersBases">
                <div class="col-title">基础信息完善情况统计</div>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filtersBases.belong" size="12px" clearable>
                        <el-option  :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="文理分类" v-model="filtersBases.arts_type" size="12px" clearable>
                        <el-option  :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filtersBases.provinces" size="18px" clearable>
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button v-loading="basesTableDataLoading" type="primary" @click="searchBases">搜索</el-button>
                    <el-button v-loading="basesTableDataLoading" @click="reset('filtersBases')">重置</el-button>
                    <el-button v-loading="basesExportLoading" @click="exportExcel('bases')">导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8" >
            <div class="corrected-total yiwancheng">
                <p>
                    已完善全部信息高校数量 <br>
                    <span>{{complete}}</span>所
                </p>
            </div>
        </el-col>
        <el-col :span="8" >
            <div class="corrected-total weiwancheng">
                <p>
                    未完善全部信息高校数量<br>
                    <span>{{nocomplete}}</span>所
                </p>
            </div>
        </el-col>
        <el-col :span="8" >
            <div class="corrected-total wanchengbili">
                <p>
                    高校完善信息比例<br>
                    <span>{{rate}}</span>
                    %
                </p>
            </div>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :data="basesTableShowData"
                stripe
                v-loading="basesTableDataLoading"
                style="width: 100%;"
        >
            <el-table-column
                    label="高校名称"
                    :width="240"
                    prop="unit_Name" />
            <el-table-column
                    align="center"
                    label="全部信息"
                    prop="total">
                <template slot-scope="scope">
                    <el-button @click="showRowData(scope.row)" style="padding:6px!important;" :type="scope.row.total ? 'success' : 'warning'" :icon="scope.row.total ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="学校概况"
                    prop="item_on_0">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_0 ? 'success' : 'warning'" :icon="scope.row.item_on_0 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="组织体系"
                    prop="item_on_1">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_1 ? 'success' : 'warning'" :icon="scope.row.item_on_1 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="实验室类别"
                    prop="item_on_2">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_2 ? 'success' : 'warning'" :icon="scope.row.item_on_2 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="管理制度"
                    prop="item_on_3">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_3 ? 'success' : 'warning'" :icon="scope.row.item_on_3 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="基础设施"
                    prop="item_on_4">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_4 ? 'success' : 'warning'" :icon="scope.row.item_on_4 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="实验室资质"
                    prop="item_on_5">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_5 ? 'success' : 'warning'" :icon="scope.row.item_on_5 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="教育培训与检查"
                    prop="item_on_6">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_6 ? 'success' : 'warning'" :icon="scope.row.item_on_6 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="其他"
                    prop="other">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.other ? 'success' : 'warning'" :icon="scope.row.other ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="附件"
                    prop="item_on_9">
                <template slot-scope="scope">
                    <el-button style="padding:6px!important;" :type="scope.row.item_on_9 ? 'success' : 'warning'" :icon="scope.row.item_on_9 ? 'el-icon-check' : 'el-icon-close'" circle />
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="basesHandleSizeChange"
                    @current-change="basesHandleCurrentChange"
                    :page-size="pagerBase.page_size"
                    :page-sizes="pagerBase.sizes"
                    background
                    :current-page="pagerBase.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pagerBase.total">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import { getCollegeSummary, exportCollegeSummaryExcel, getCollegeSummaryOvercomplete,exportCollegeSummaryOvercompleteExcel  } from '../../api/statistics_api'
    import { saveAs } from 'file-saver';
    import dict from '../../common/js/dict';
    export default {
        name:'univInfo',
        data() {
            return {
                dict:dict,
                currentYear: '2018',
                complete: '',
                nocomplete: '',
                rate: '',
                univTableDataLoading: false,
                univExportLoading: false,
                basesTableDataLoading: false,
                basesExportLoading: false,
                //表格数据
                univTableShowData: [],
                univTableData: [],
                basesTableShowData: [],
                basesTableData: [],
                filtersUniv: {
                    belong: '',
                    arts_type:'',
                    provinces:'',
                },
                filtersBases: {
                    belong: '',
                    arts_type:'',
                    provinces:'',
                },
                //分页设置
                pagerUniv: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                //分页设置
                pagerBase: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                options: {
                    years: []
                }
            }
        },
        methods: {
            exportExcel(name){
              if(name == 'univ'){
                  this.univExportLoading = true
                  exportCollegeSummaryExcel(this.filtersUniv).then(res => {
                      this.univExportLoading = false
                      if(res.data.status == 200) saveAs(res.data.datas)
                  })
              }else{
                  this.basesExportLoading = true
                  exportCollegeSummaryOvercompleteExcel(this.filtersUniv).then(res => {
                      this.basesExportLoading = false
                      if(res.data.status == 200) saveAs(res.data.datas)
                  })
              }
            },
            //分页page_size发生改变
            basesHandleSizeChange(val) {
                this.pagerBase.page_current = 1;
                this.pagerBase.page_size = val;
                this.setPages('bases')
            },
            //分页page_current发生改变
            basesHandleCurrentChange(val) {
                this.pagerBase.page_current = val;
                this.setPages('bases')
            },
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pagerUniv.page_current = 1;
                this.pagerUniv.page_size = val;
                this.setPages('univ')
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pagerUniv.page_current = val;
                this.setPages('univ')
            },
            searchUniv(){
                this.pagerUniv.page_current = 1;
                this.getUnivTableData();
            },
            getUnivTableData(){
                this.univTableDataLoading = true
                getCollegeSummary(this.filtersUniv).then(res => {
                    if(res.data.status == 200) {
                        let tempData = JSON.parse(res.data.datas)
                        tempData.map(item => {
                            item.lab_total = Number(item.basic_param4) + Number(item.basic_param6)
                            item.per_capita = (Number(item.basic_param10) / ( Number(item.basic_param7) + Number(item.basic_param9) )).toFixed(2)
                        })
                        this.univTableData = tempData
                        this.pagerUniv.total = this.univTableData.length
                        this.tabSort({prop:'basic_param4', order:'ascending'})
                    }
                    this.univTableDataLoading = false
                })
            },
            searchBases(){
                this.pagerBase.page_current = 1;
                this.getBasesTableData();
            },
            tableSort(){

            },
            compare(attr,rev){
                if(rev == null)
                    rev = 1
                else
                    rev = (rev) ? 1 : -1
                return (a,b) => {
                    a = a[attr]
                    b = b[attr]
                    if(Number(a) < Number(b)){
                        return rev * -1
                    }
                    if(Number(a) > Number(b)){
                        return rev * 1
                    }
                    return 0
                }
            },
            tabSort(column){
                let tempData = JSON.parse(JSON.stringify(this.univTableData))
                let rev = column.order == 'descending' ? true : false
                tempData.sort(this.compare(column.prop,rev))
                this.univTableData = tempData
                this.setPages('univ')
            },
            setPages(name){
                let start = 0, end = 0
                if(name == 'univ'){
                    let tempData = JSON.parse(JSON.stringify(this.univTableData))
                    end = this.pagerUniv.page_current *  this.pagerUniv.page_size
                    start = end - this.pagerUniv.page_size
                    this.univTableShowData = tempData.slice(start, end)
                }else {
                    let tempData = JSON.parse(JSON.stringify(this.basesTableData))
                    end = this.pagerBase.page_current *  this.pagerBase.page_size
                    start = end - this.pagerBase.page_size
                    this.basesTableShowData = tempData.slice(start, end)
                }
            },
            getBasesTableData(){
                this.basesTableDataLoading = true
                getCollegeSummaryOvercomplete(this.filtersBases).then(res => {
                    if(res.data.status == 200) {
                        let tempData = JSON.parse(res.data.datas)
                        if(tempData.colleges){
                            tempData.colleges.map(item => {
                                let ify = 1
                                if(item.progress){
                                    item.progress.map((pItem,pIndex) => {
                                        if(pIndex == 7 || pIndex == 8 || pIndex == 10 || pIndex == 11){
                                            if(item.other && item.other == 1){
                                                item.other = pItem == '0' ? 0 : 1
                                            } else {
                                                item.other = Number(pItem)
                                            }
                                        } else {
                                            item['item_on_'+pIndex] = Number(pItem)
                                        }
                                        if(pItem == '0') ify = 0
                                    })
                                }
                                item.total = ify
                            });
                        }
                        this.basesTableData = tempData.colleges
                        this.pagerBase.total = tempData.colleges.length
                        this.complete = tempData.complete
                        this.nocomplete = tempData.nocomplete
                        this.rate = tempData.rate
                        this.setPages('bases')
                    }
                    this.basesTableDataLoading = false
                })
            },
            reset(fromName){
                this.$refs[fromName].resetFields();
                this.currentYear = (new Date()).getFullYear()+'';
                if(fromName == 'filtersBases'){
                    this.filtersBases.year = this.currentYear;
                    this.pagerBase.page_current = 1;
                    this.getBasesTableData();
                }else{
                    this.pagerUniv.year = this.currentYear;
                    this.pagerUniv.page_current = 1;
                    this.getUnivTableData();
                }
            },
            initYears() {
                this.currentYear = (new Date()).getFullYear()+'';
                this.pagerUniv.year = this.currentYear;
                this.filtersBases.year = this.currentYear;
                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }

            },
            showRowData(data) {
                console.log(data)
            },
            totalLab(data) {
                return Number(data.basic_param6) + Number(data.basic_param4)
            },
            //初始化页面
            initData() {
                this.initYears();
                this.getBasesTableData();
                this.getUnivTableData();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>
<style scoped lang="scss">
.mt30{
    margin-top:30px;
}
.col-title{
    display:inline-table;
    font-weight:600;
    font-size:16px;
    color:#333;
    padding:0 30px 0 15px;
}
    .corrected-total{
        height:180px;
        border-radius: 8px;
        margin:20px;
        font-size:20px;
        color:#fff;
        padding-left:60px;
        -webkit-box-shadow: 3px 5px 15px 0 #d6ddf4;
        box-shadow: 3px 5px 15px 0 #d6ddf4;
        >p{
            padding-top:40px;
            line-height: 40px;
        }
        &.yiwancheng{
            background:#6a91f2 url('../../assets/images/img_yiwancheng.png') center right no-repeat;
            background-size: 115px;
        }
        &.weiwancheng{
            background:#feba6c url('../../assets/images/img_weiwancheng.png') center right no-repeat;
            background-size: 115px;
        }
        &.wanchengbili{
            background:#70cfef url('../../assets/images/img_zhenggailv.png') center right no-repeat;
            background-size: 115px;
        }
        span{
            font-size:50px;
        }
    }
</style>
